<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

<button id="Interval">Interval</button>
<p id="Interval_p"></p>
<p id="setInterval_p"></p>

<button id="PauseTime">PauseTime</button>
<p id="PauseTime_p"></p>

<button id="PlayTime">PlayTime</button>
<p id="PlayTime_p"></p>


<button id="ResetTime">ResetTime</button>
<p id="ResetTime_p"></p>

<button id="ClearTime">ClearTime</button>
<p id="ClearTime_p"></p>


<button id="Timeout">Timeout</button>
<p id="Timeout_p"></p>


<script type="text/javascript" src="../dist/alloytimer.min.js"></script>
<script type="text/javascript">

//占用线程事件 
// setInterval(function(){ 
//      var j = 0; 
//      while(j++ < 100000000); 
// }, 0); 

// setInterval(function(){ 
//      var j = 0; 
//      while(j++ < 100000000); 
// }, 0); 

// setInterval(function(){ 
//      var j = 0; 
//      while(j++ < 100000000); 
// }, 0); 

// setInterval(function(){ 
//      var j = 0; 
//      while(j++ < 100000000); 
// }, 0); 

var $ = function(id) {
    return document.getElementById(id);
}

var onClick = function($, callback) {
    $.addEventListener("click", callback);
}

var render = function($, html){
    $.innerHTML = html;
}

var $Interval = $('Interval');
var $Interval_p = $('Interval_p');
var Interval_timerId = null;

onClick($Interval, function(){
    requestIntervalTimer = requestInterval(function(times, _left){
        render($Interval_p, times + "____" + (20 - times))
        // render($Interval_p, times + "____" + (_left - times * 1000))
    }, 1000, true);
})


// var $setInterval_p = $('setInterval_p');
// var start = new Date().getTime(); 
// var count = 0; 
// setInterval(function(){
//     count = parseInt(((new Date().getTime() - start) / 1000),10);
//     render($setInterval_p, count + "____" + ( new Date().getTime() - (start + count * 1000)))
// },1000); 


var $PauseTime = $('PauseTime');
var $PauseTime_p = $('PauseTime_p');
onClick($PauseTime, function(){
    requestIntervalTimer.pause();
})


var $PlayTime = $('PlayTime');
var $PlayTime_p = $('PlayTime_p');
onClick($PlayTime, function(){
    requestIntervalTimer.play();
})


var $ResetTime = $('ResetTime');
var $ResetTime_p = $('ResetTime_p');
onClick($ResetTime, function(){
    requestIntervalTimer.reset();
})

var $ClearTime = $('ClearTime');
var $ClearTime_p = $('ClearTime_p');
onClick($ClearTime, function(){
    requestIntervalTimer.clear();
})


// timeout

var $Timeout = $('Timeout');
var $Timeout_p = $('Timeout_p');
var requestTimeoutTimer = null;
onClick($Timeout, function(){
    requestTimeoutTimer = requestTimeout(function(times, _left){
        render($Timeout_p, times + "____" + _left)
        console.log("Timeout", times, _left);
    }, 1000);
})


var requestFrameTimer = requestFrame(function(times, _left){
    render($Timeout_p, times + "____" + _left)
    if (_left >= 2000) {
        requestFrameTimer.clear();
    }
})

// setTimeout(function(){
//     requestFrameTimer.clear();
// },2000)
// var start = new Date().getTime(); 
// var count = 0; 
// setInterval(function(){
//      count++; 
//      console.log( new Date().getTime() - (start + count * 1000)); 
// },1000); 


/*
var timerId = Timeout(function(times){
	console.log("33", times);
}, 1000);


var timerId = Timeout(function(times){
	console.log("44", times);
}, 2000);

setTimeout(function(){
    Timeout(function(){
        console.log(55);
    }, 1000);
}, 4000)*/

// ClearTime(timerId);

/*
var start = new Date().getTime(); 
setTimeout(function(){ 
     // 200 上下
     console.log("setTimeout", new Date().getTime() - (start + 1000)); 
},1000); */

// setTimeout(function(){ 
//      // 200 上下
//      console.log("setTimeout", new Date().getTime() - (start + 2000)); 
// },2000); 

</script>
</body>
</html>